
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>视差 - UIkit 中文文档</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
        <script src="../src/js/components/parallax.js"></script>

        <style media="screen">
            .test-bg {
                height: 350px;
                background-image: url('http://unsplash.it/1200/810?image=480');
            }
        </style>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li><a href="core.html">核心组件</a></li>
                    <li class="uk-active"><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li class="uk-active"><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1>视差/Parallax</h1>

                            <p class="uk-article-lead">依赖于页面滚动条位置的动态 CSS 特性。</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>要使用这个组件，需要添加 <code>data-uk-parallax</code> 属性到容器元素。并为每个你想要使之动态变化的 CSS 属性添加对应的选项值。<span class="uk-badge uk-badge-danger">注意</span> 此组件需要额外添加 <code>parallax.js</code> 文件，在<code>js/components</code>文件夹中。</p>

                            <div class="uk-margin uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle" data-uk-parallax="{bg: '-200'}" style="height: 350px; background-image: url('images/placeholder_800x400_2.jpg');">
                                <div class="uk-width-medium-1-2">
                                    <h1 class="uk-text-contrast">Heading</h1>
                                    <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-parallax=&quot;{bg: '-200'}&quot;&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="options"><a href="#options" class="uk-link-reset">选项</a></h2>

                            <p>UIkit 提供了一系列的选项，你可以把它们添加到 <code>data-uk-parallax</code> 属性中：</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>选项</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>x</code></td>
                                            <td>以像素为单位的 X 轴方向位移。</td>
                                        </tr>
                                        <tr>
                                            <td><code>xp</code></td>
                                            <td>以百分比为单位的 X 轴方向位移。</td>
                                        </tr>
                                        <tr>
                                            <td><code>y</code></td>
                                            <td>以像素为单位的 Y 轴方向位移。</td>
                                        </tr>
                                        <tr>
                                            <td><code>yp</code></td>
                                            <td>以百分比为单位的 Y 轴方向位移。</td>
                                        </tr>
                                        <tr>
                                            <td><code>bg</code></td>
                                            <td>使背景图片动态变化。</td>
                                        </tr>
                                        <tr>
                                            <td><code>bgp</code></td>
                                            <td>以百分比为单位的背景图片动态变化。</td>
                                        </tr>
                                        <tr>
                                            <td><code>rotate</code></td>
                                            <td>以度为单位的顺时针动态变化。</td>
                                        </tr>
                                        <tr>
                                            <td><code>scale</code></td>
                                            <td>缩放的动态变化</td>
                                        </tr>
                                        <tr>
                                            <td><code>color</code></td>
                                            <td>色彩的动态变化（需要设置起始值和终止值）</td>
                                        </tr>
                                        <tr>
                                            <td><code>background-color</code></td>
                                            <td>背景色彩的变化（需要设置起始值和终止值）</td>
                                        </tr>
                                        <tr>
                                            <td><code>border-color</code></td>
                                            <td>border 色彩的变化（需要设置起始值和终止值）</td>
                                        </tr>
                                        <tr>
                                            <td><code>opacity</code></td>
                                            <td>透明度的变化</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p><span class="uk-badge">注意</span> 你可以基础性地使任意只有一值的 CSS 属性动态变化，比如宽度和高度，直接添加到属性中即可。</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-parallax=&quot;{y: '-200', opacity: '0'}&quot;&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="start-stop-value"><a href="#start-stop-value" class="uk-link-reset">起始值和终止值</a></h3>

                            <p>属性通常由当前值变化到你设置的目标值。然而，你还可以自己定义一个起始值。这将通过传递字符串到包含由逗号隔开的两个值的选项中来实现。</p>

                            <p><span class="uk-badge">注意</span> 某些属性，比如颜色，必须要有起始值和终止值。</p>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;div data-uk-parallax=&quot;{x: '-100,100', 'background-color': '#EBF7FD,#FFF1F0'}&quot;&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="nested-animation"><a href="#nested-animation" class="uk-link-reset">嵌套的动画/Nested animation</a></h2>

                            <p>为前提的元素使用不同的动画是很简单的事情。只需在视差容器中再创建一个容器，并在新的 <code>data-uk-parallax</code> 属性中添加你的选项即可。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-margin uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle" data-uk-parallax="{bg: -200}" style="height: 350px; background-image: url('images/placeholder_800x400_1.jpg');">
                                <div class="uk-width-medium-1-2" data-uk-parallax="{opacity: '0,1', scale: '0,1'}">
                                    <h1 class="uk-text-contrast">Heading</h1>
                                    <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-parallax=&quot;{bg: -200}&quot;&gt;
    &lt;div data-uk-parallax=&quot;{opacity: '0,1', scale: '0,1'}&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="target-option"><a href="#target-option" class="uk-link-reset">目标选项/Target Option</a></h2>

                            <p>通常，视差动画从元素进入视口开始，到离开视口结束。开始和终止动画基于另一个元素在视口中的可见性，使用 <code>target</code> 选项进行设置。在使用嵌套动画时会很有帮助。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-margin uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle" data-uk-parallax="{bg: -200}" style="height: 350px; background-image: url('images/placeholder_800x400_2.jpg');">
                                <div class="uk-width-medium-1-2" data-uk-parallax="{opacity: '0,1', scale: '0,1', target: '#target-option'}">
                                    <h1 class="uk-text-contrast">Heading</h1>
                                    <p class="uk-text-large">这段文字的动画在上面的 &quot;目标选项/Target Option&quot; 存在于视口中时，一直持续发生。</p>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>
&lt;div id="target-id"&gt;...&lt;/div&gt;
&lt;div data-uk-parallax=&quot;{target: '#target-id'}&quot;&gt;...&lt;/div&gt;
</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="velocity"><a href="#velocity" class="uk-link-reset">速度/Velocity</a></h2>

                            <p>添加 <code>velocity</code> 选项，调整动画的缓动效果。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div id="test-velocity" class="uk-margin uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle" style="height: 350px; background-image: url('images/placeholder_800x400_3.jpg'); background-size: cover;">
                                <div class="uk-grid uk-flex-center uk-flex-middle">
                                    <div><div class="uk-panel uk-panel-box" data-uk-parallax="{target:'#test-velocity', y: '150', velocity: '0.04', viewport: '0.9'}">0.04</div></div>
                                    <div><div class="uk-panel uk-panel-box" data-uk-parallax="{target:'#test-velocity', y: '150', velocity: '0.2', viewport: '0.9'}">0.2</div></div>
                                    <div><div class="uk-panel uk-panel-box" data-uk-parallax="{target:'#test-velocity', y: '150', velocity: '0.6', viewport: '0.9'}">0.6</div></div>
                                    <div><div class="uk-panel uk-panel-box" data-uk-parallax="{target:'#test-velocity', y: '150', velocity: '1', viewport: '0.9'}">1</div></div>
                                    <div><div class="uk-panel uk-panel-box" data-uk-parallax="{target:'#test-velocity', y: '150', velocity: '2', viewport: '0.9'}">2</div></div>
                                    <div><div class="uk-panel uk-panel-box" data-uk-parallax="{target:'#test-velocity', y: '150', velocity: '3', viewport: '0.9'}">3</div></div>
                                    <div><div class="uk-panel uk-panel-box" data-uk-parallax="{target:'#test-velocity', y: '150', velocity: '4', viewport: '0.9'}">4</div></div>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-parallax=&quot;{velocity: '0.5'}&quot;&gt;
    ...
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="viewport"><a href="#viewport" class="uk-link-reset">视口/Viewport</a></h2>

                            <p>使用 <code>viewport</code> 选项，动画持续时间将被调整。其值为 <code>1</code> 或 <code>false</code> 时，视差动画从元素进入视口开始，到离开视口结束。将其设置为 <code>0.5</code>，如下面的例子，动画只在元素出现的前半个视口中发生。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-margin uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle" data-uk-parallax="{bg: -200}" style="height: 350px; background-image: url('images/placeholder_800x400_1.jpg');">
                                <div class="uk-width-medium-1-2" data-uk-parallax="{opacity: '0,1', scale: '0,1', viewport: '0.5'}">
                                    <h1 class="uk-text-contrast">Heading</h1>
                                    <p class="uk-text-large">这段文字的动画会在其抵达时候中部前持续发生。</p>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-parallax=&quot;{viewport: '0.5'}&quot;&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript 选项</a></h2>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>选项</th>
                                            <th>可用值</th>
                                            <th>默认值</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>velocity</code></td>
                                            <td>float</td>
                                            <td>0.5</td>
                                            <td>页面滚动时，动画的速度</td>
                                        </tr>
                                        <tr>
                                            <td><code>target</code></td>
                                            <td>mixed</td>
                                            <td>false</td>
                                            <td>关于动画持续时间的元素尺寸参考/Element dimension reference for animation duration.</td>
                                        </tr>
                                        <tr>
                                            <td><code>viewport</code></td>
                                            <td>float (0 to 1)</td>
                                            <td>false</td>
                                            <td>依赖于视口的动画范围</td>
                                        </tr>
                                        <tr>
                                            <td><code>media</code></td>
                                            <td>integer / string</td>
                                            <td>false</td>
                                            <td>启用视差效果的视口宽度条件（比如640px），或CSS媒体查询</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">手动初始化</h3>

                            <pre><code>var parallax = UIkit.parallax(element, { /* options */ });</code></pre>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
